"use client";
import { Input } from "@/components/ui/input";
import axios from "axios";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useCallback, useState } from "react";
import { FaGithub } from "react-icons/fa";
import { FcGoogle } from "react-icons/fc";

const Auth = () => {
    const [email, setEmail] = useState("ggbhack@gmail.com")
    const [password, setPassword] = useState("123456")
    const [name, setName] = useState("")
    const [variant, setVariant] = useState("login")
    const router = useRouter()
    const toggleVariant = () => {
        setVariant(variant === "login" ? "register" : "login")
    }

    // 登录
    const login = useCallback(async () => {
        try {
            await signIn('credentials', {
                email,
                password,
                redirect: true,
                callbackUrl: '/profile'
            })
        } catch (err) {
            console.log(err)
        }
    }, [email, password])
    // 注册
    const register = useCallback(async () => {
        try {
            await axios.post("/api/register", {
                email,
                name,
                password
            })
            login()
        } catch (err) {
            console.log(err)
        }
    }, [email, name, password, login])
    // 执行函数
    const onAction = () => {
        if (variant === "login") {
            login()
        } else {
            register()
        }
    }



    return (
        <div className="bg-black bg-opacity-70 px-16 py-16 self-center mt-2 lg:w-2/5 lg:max-w-md rounded-md w-full">
            <h2 className="text-4xl font-semibold text-white mb-8">Sign in</h2>
            <div className="flex flex-col gap-4">
                {
                    variant === "register" && (<Input value={name} onChange={setName} id="name" label="Name" />)
                }
                <Input value={email} onChange={setEmail} type="email" id="email" label="Email" />
                <Input value={password} onChange={setPassword} id="password" label="Password" type="password" />
                <button onClick={onAction} className="py-3 text-white flex items-center font-semibold justify-center bg-red-600 rounded-m w-full mt-18 hover:bg-red-700 transition">
                    {
                        variant === "login" ? "Login" : "Sign up"
                    }
                </button>
                <div className="flex flex-row items-center gap-4 mt-8 justify-center">
                    <div onClick={() => signIn('google', { callbackUrl: '/profile' })} className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
                        <FcGoogle size={30} />
                    </div>
                    <div onClick={() => signIn('github', { callbackUrl: '/profile' })} className="w-10 h-10 bg-white rounded-full flex items-center justify-center cursor-pointer hover:opacity-80 transition">
                        <FaGithub color="black" size={30} />
                    </div>
                </div>
                <p className="text-neutral-500 mt-12">
                    {variant === "login" ? "First time using netflix?" : "Already have an account?"}
                    <span onClick={toggleVariant} className="text-white ml-1  hover:underline cursor-pointer">
                        {variant === "login" ? "Create an account" : "Login"}
                    </span>
                </p>
            </div>
        </div>
    );
}

export default Auth
